<script setup>
import { ref, computed } from 'vue'

const healthPoints = ref([
  {
    id: 1,
    title: '饮食调理',
    points: 85,
    maxPoints: 100,
    tips: '合理饮食，注意营养均衡，少食多餐'
  },
  {
    id: 2,
    title: '运动锻炼',
    points: 60,
    maxPoints: 100,
    tips: '适量运动，每天至少30分钟有氧运动'
  },
  {
    id: 3,
    title: '睡眠质量',
    points: 70,
    maxPoints: 100,
    tips: '保持规律作息，睡前避免使用电子产品'
  },
  {
    id: 4,
    title: '情绪管理',
    points: 75,
    maxPoints: 100,
    tips: '保持心情舒畅，避免情绪大起大落'
  },
  {
    id: 5,
    title: '中医养生',
    points: 80,
    maxPoints: 100,
    tips: '根据体质调理，四季养生有侧重'
  }
])

const totalPoints = computed(() => {
  return healthPoints.value.reduce((sum, item) => sum + item.points, 0)
})

const maxTotalPoints = computed(() => {
  return healthPoints.value.reduce((sum, item) => sum + item.maxPoints, 0)
})

const healthScore = computed(() => {
  return Math.round((totalPoints.value / maxTotalPoints.value) * 100)
})

const healthStatus = computed(() => {
  const score = healthScore.value
  if (score >= 90) return { text: '优秀', color: '#52c41a' }
  if (score >= 80) return { text: '良好', color: '#1890ff' }
  if (score >= 70) return { text: '一般', color: '#faad14' }
  if (score >= 60) return { text: '较差', color: '#fa8c16' }
  return { text: '不佳', color: '#f5222d' }
})
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">多点健康</view>
      <view class="subtitle">全方位评估您的健康状态</view>
    </view>
    
    <view class="score-card">
      <view class="score-circle">
        <text class="score-value">{{ healthScore }}</text>
        <text class="score-label">健康评分</text>
      </view>
      <view class="score-status" :style="{ color: healthStatus.color }">
        {{ healthStatus.text }}
      </view>
    </view>
    
    <view class="health-points-list">
      <view 
        v-for="item in healthPoints" 
        :key="item.id"
        class="health-point-item"
      >
        <view class="point-header">
          <text class="point-title">{{ item.title }}</text>
          <text class="point-value">{{ item.points }}/{{ item.maxPoints }}</text>
        </view>
        
        <view class="point-progress">
          <view 
            class="point-progress-bar" 
            :style="{ width: `${(item.points / item.maxPoints) * 100}%` }"
          ></view>
        </view>
        
        <view class="point-tips">
          <text class="tips-label">建议：</text>
          <text class="tips-content">{{ item.tips }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.score-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .score-circle {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background-color: #f0f5ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
    
    .score-value {
      font-size: 60rpx;
      font-weight: bold;
      color: #1890ff;
    }
    
    .score-label {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }
  
  .score-status {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.health-points-list {
  .health-point-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .point-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .point-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .point-value {
        font-size: 28rpx;
        color: #1890ff;
      }
    }
    
    .point-progress {
      height: 16rpx;
      background-color: #f0f0f0;
      border-radius: 8rpx;
      overflow: hidden;
      margin-bottom: 15rpx;
      
      .point-progress-bar {
        height: 100%;
        background-color: #1890ff;
        border-radius: 8rpx;
      }
    }
    
    .point-tips {
      font-size: 26rpx;
      color: #666;
      
      .tips-label {
        color: #333;
      }
    }
  }
}
</style>